<ion-content no-padding class="page-life-payment-page">
  <ion-grid class="greenbg">
    <ion-row>
        <ion-select [(ngModel)]="contractId" (ngModelChange)="contractId = $event;doRefresh()" class="right10">
          <ion-option *ngFor="let item of houseList"[value]="item.contractId">{{item.houseNo}}</ion-option>
        </ion-select>
    </ion-row>
  </ion-grid>
  <ion-grid class="whitebg">

  </ion-grid>

  <div class="balance-container">
    <ion-row>
      <ion-col text-center>
        <span class="text">电费余额</span>
        <canvas id="ebalance" style="width: 100%"></canvas>
      </ion-col>
      <ion-col text-center>
        <span class="text">水费余额</span>
        <canvas id="wbalance" style="width: 100%"></canvas>
      </ion-col>
    </ion-row>
    <ion-row text-center class="buttonct">
      <button class="gopay" ion-button color="main-a-40" (click)="gotoPay()">去缴费</button>
    </ion-row>
  </div>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <div *ngFor="let v of billList;let i= index;" class="bill-container">
    <p *ngIf="i%2==0"><span class="month">{{v.month}}</span></p>
    <ion-row class="bill-content">
      <ion-col no-padding [ngClass]="{w: v.type==1,e: v.type!=1}">
        {{v.typeName}}
      </ion-col>
      <ion-col no-padding>
        {{v.money}}
      </ion-col>
      <ion-col no-padding>
        {{v.content}}
      </ion-col>
    </ion-row>
  </div>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="canLoadMore">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
  <div *ngIf="!canLoadMore&&billList.length>10"
       style="text-align: center;width: 100%;height: 60px;padding: 20px 0;color:#848484">
    ————————别扯啦!————————
  </div>
</ion-content>
